<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/css/loginstyle.css">
    <style>
        span {
            color: red;
        }
    </style>

</head>
<body>

<div class="container">

    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="#" method="post" class="form" id="form1">
            <h2 class="form__title">注册</h2>
            <input type="text" placeholder="用户名" id="userName" name="userName" class="input">
            <span id="regName"></span>
            <input type="password" placeholder="密码" id="userPwd" name="userPwd" class="input">
            <input type="text" placeholder="手机号" id="userTel" name="userTel" class="input">
            <span id="regTel"></span>
            <input type="text" placeholder="短信验证码" id="smsCode" class="input" name="smsCode"
                   style="width:150px;margin-right:132px;display: inline-block">
            <input type="button" class="btn-primary" value="发送短信验证码" id="sendSms"
                   style="margin-left: 175px;margin-top: -58px;padding: 8px;"></input>
            <span id="regerror"></span>
            <button type="button" class="btn" id="register">注册</button>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="${pageContext.request.contextPath}/user/login" id="loginform" method="post" class="form">
            <h2 class="form__title">登录</h2>
            <input type="text" placeholder="用户名/手机号" name="userName" class="input" required>
            <input type="password" placeholder="密码" name="userPwd" class="input" required>
            <span>${requestScope.errorMsg}</span>
            <a href="#" class="link" id="cbt">手机验证码登录</a>
            <button class="btn">登录</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">登录</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/style/js/loginscript.js"></script>
<script src="${pageContext.request.contextPath}/style/js/loginjquery.js"></script>

<script>
    $(function () {
        $("#register").click(function () {
            if ($("#regName").html().trim() == "可用" && $("#userPwd").val() != "" && $("#regTel").html().trim() == "可用" && $("#regerror").html() == "验证码正确") {
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/register",
                    Type: "POST",
                    data: {userName: $("#userName").val(), userPwd: $("#userPwd").val(), userTel: $("#userTel").val()},
                    success: function (flag) {
                        if (flag == "false") {
                            $("#regerror").html("注册失败,请重试~~");
                        } else {
                            $(".container").removeClass("right-panel-active");
                            $("#regTel").html("");
                            $("#regName").html("");
                        }
                    }
                })
            }
        });

        $("#userName").blur(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/user/checkName",
                Type: "POST",
                data: {userName: $("#userName").val()},
                dataType: "text",
                success: function (messagse) {
                    if (messagse == "") {
                        if ($("#userName").val().trim() != "") {
                            $("#regName").html("可用");
                            $("#regName").attr("style", "color:green")
                        }
                    } else {
                        $("#regName").html(messagse);
                        $("#regName").attr("style", "color:red")
                    }
                }
            })
        });

        $("#userTel").blur(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/user/checkTel",
                Type: "POST",
                data: {userTel: $("#userTel").val()},
                dataType: "text",
                success: function (messagse) {
                    if (messagse == "") {
                        if ($("#userTel").val().trim() != "") {
                            $("#regTel").html("可用");
                            $("#regTel").attr("style", "color:green")
                        }
                    } else {
                        $("#regTel").html(messagse);
                        $("#regTel").attr("style", "color:red")
                    }
                }
            })
        });

        $("#smsCode").blur(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/user/checkCode",
                Type: "POST",
                data: {userTel: $("#userTel").val(), code: $("#smsCode").val()},
                dataType: "text",
                success: function (message) {
                    $("#regerror").html(message)
                }
            })
        });

        $(document).on("click", "#smsCode2", function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/user/checkCode",
                Type: "POST",
                data: {userTel: $("#userTel2").val(), code: $("#smsCode2").val()},
                dataType: "text",
                success: function (message) {
                    $("#loginerror").html(message)
                }
            })
        })

        $("#sendSms").click(function () {
            let phone = $("#userTel").val();
            if ($("#regTel").html() == "可用") {
                $.post("${pageContext.request.contextPath}/sms/sendSms", {phone: phone}, function (str) {
                    $("#regerror").html(str);
                })
            }
        })

        $(document).on("click", "#sendSms2", function () {
            let phone = $("#userTel2").val();
            $.post("${pageContext.request.contextPath}/sms/sendSms", {phone: phone}, function (str) {
                $("#loginerror").html(str);
            })
        })

        $(document).on("click", "#cbt", function () {
            let content = "<h2 class=\"form__title\">登录</h2>" +
                "<input type=\"text\" placeholder=\"手机号\" id=\"userTel2\"  name=\"userTel\" class=\"input\">\n" +
                "\t\t\t<input type=\"text\" placeholder=\"短信验证码\" id=\"smsCode2\" class=\"input\" name=\"smsCode\"  style=\"width:150px;margin-right:132px;display: inline-block\">\n" +
                "\t\t\t<input type=\"button\" class=\"btn-primary\"  value=\"发送短信验证码\" id=\"sendSms2\" style=\"margin-left: 175px;margin-top: -58px;padding: 8px;\"></input>" +
                "<span id=\"loginerror\">${requestScope.errorMsg}</span>\n" +
                "\t\t\t<a href=\"#\" class=\"link\" id=\"zbt\">账号密码登录</a>\n" +
                "\t\t\t<button class=\"btn\">登录</button>";
            $("#loginform").html(content)
            $("#loginform").addClass("loginform");
            $("#loginform").attr("action", "${pageContext.request.contextPath}/user/logintwo");
        })

        $(document).on("click", "#zbt", function () {
            let content = "<h2 class=\"form__title\">登录</h2>\n" +
                "\t\t\t<input type=\"text\" placeholder=\"用户名/手机号\"  name=\"userName\" class=\"input\" required>\n" +
                "\t\t\t<input type=\"password\" placeholder=\"密码\" name=\"userPwd\" class=\"input\" required>\n" +
                "\t\t\t<span>${requestScope.errorMsg}</span>\n" +
                "\t\t\t<a href=\"#\" class=\"link\" id=\"cbt\">手机验证码登录</a>\n" +
                "\t\t\t<button  class=\"btn\">登录</button>";
            $("#loginform").html(content)
            $("#loginform").removeClass("loginform");
            $("#loginform").attr("action", "${pageContext.request.contextPath}/user/login");
        })

        $(document).on("submit", ".loginform", function () {
            if($("#loginerror").html() == "验证码正确"){
                return true;
            }
            return false;
        })
    })
</script>
</html>
